import React from 'react';
import Nav from '../../components/nav/Nav';
import Cnav from '../../components/cnav/Cnav';
import ScrollTest from '../../components/scrollTest/ScrollTest';
import Pagination from '../../components/pagination/Pagination';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'App';

        this.state = {
            divOffsetTop: [],
            navPosition: 0
        }
    }

    componentDidMount() {
        // 取得每个div 到页面顶部的高度
        console.log("test MainPage did Mount");

        let divs = $(".scroll>div");
        let navHeight = $(".cnav:eq(0)").outerHeight(true);
        let divsH = [];

        console.log(`navHeight: ${navHeight}`);

        // 每个 div 的 scrollTop 是 offset.top - navHeight
        divs.each(function(index, el) {
            let me = $(this);
            console.log( me.offset().top);
            if(index == 0) {
                divsH[index] = 0;
            }else {
                divsH[index] = me.offset().top-navHeight;
            }
        });
        console.log(divsH);

        this.setState({
            divOffsetTop: divsH
        });
    }

    //  window.scroll 时 通过 函数来传递 nav 应该的位置，从而控制cnav 中 nav 的位置
    passNavPosition ( position ) {
        console.log("****************");
        console.log( "passNavPosition" );
        console.log( position );
        this.setState({
            navPosition: position
        });
    }

    render() {
        return (
            <div>
                <Nav name="热火" />
                <Cnav scrollOffsetTop = {this.state.divOffsetTop}  navPosition={this.state.navPosition} />
                <ScrollTest scrollOffsetTop = {this.state.divOffsetTop} passNavPosition = {this.passNavPosition.bind(this) } />
                <Pagination />
            </div>
        );
    }
}

export default App;
